<template>
    <div class="post-comment-container">
        <van-popup
            class="writeComment"
            :value="showWriteCommentPop"
            position="bottom"
            get-container="body"
            safe-area-inset-bottom
            @click-overlay="$emit('update:showWriteComment', false)"
        >
            <van-field
                class="comment-content"
                v-model="commentContent"
                rows="4"
                type="textarea"
                placeholder="请输入评论"
                :error-message="isShowError ? '评论内容不能为空' : ''"
            />
            <p
                class="submit"
                @click="submit"
            >发 布</p>
        </van-popup>
    </div>
</template>

<script>
import * as Api from 'api/common';

export default {
    name: 'post_comment',
    components: {
    },
    props: {
        target: {
            type: [Number, String, Object],
            required: true
        },
        showWriteComment: {
            type: Boolean,
            default: false
        },
        articleId: {
            type: [Number, String],
            default: null
        }
    },
    // 监控data中的数据变化
    watch: {
        // showWriteComment: {
        //     handler (val) {
        //         this.showWriteCommentPop = val;
        //     }
        // }
        commentContent: {
            handler (val) {
                if (val.length) this.isShowError = false;
            }
        }
    },
    // 定义属性
    data () {
        return {
            commentContent: '',
            isShowError: false
        };
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
        showWriteCommentPop () {
            return this.showWriteComment;
        }
    },
    // 方法集合
    methods: {
        async submit () {
            if (!this.commentContent) {
                this.isShowError = true;
                return;
            }
            this.$toast.loading({
                duration: 0, // toast 提示一直存在，只能手动清楚
                message: '发布中...',
                forbidClick: true
            });
            const data = {
                target: this.target,
                content: this.commentContent,
                art_id: this.articleId ? this.articleId : null
            };
            try {
                const res = await Api.reqDev('/v1_0/comments', 'post', { data });
                if (res.message === 'OK') {
                    this.$toast.success('评论成功');
                    this.commentContent = '';
                    // this.showWriteComment = false;
                    this.$emit('update:showWriteComment', false);
                    this.$emit('post-success', res.data.new_obj);
                }
                this.$toast.clear();
                this.$toast.success('发布成功');
            } catch (err) {
                console.log(err);
                this.$toast.clear();
                this.$toast.fail('发布失败');
            }
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
    }
};
</script>

<style lang='less'>
.writeComment {
    display: flex;
    align-items: center;
    height: 26%;
    .comment-content {
        flex: 1;
        textarea {
            font-size: 16px;
        }
    }
    .submit {
        font-size: 20px;
        width: 50px;
        margin: 0 10px;
        color: rgb(14,166,216);
    }
}
</style>
